import * as echarts from 'echarts'

/**
 * @description 绘制仪表盘
 * @param {HTMLElement} dom
 * @param {Array} data -渲染参数
 * @param {Boolean} legendShow -图例是否显示
 * @param {Object} solidOption -solid实心饼图配置
 * @param {Object} hollowOption -hollow空心饼图配置
 */
function drewGauge(
  dom = '',
  value = 50,
  color = '#58D9F9',
) {
  /**
   * @see https://echarts.apache.org/examples/zh/editor.html?c=gauge-progress
   */
  const gaugeChart = echarts.init(dom)
  const option = {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        splitNumber: 12,
        itemStyle: {
          color,
        },
        progress: {
          show: true,
          roundCap: true,
          width: 8,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 8,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        title: {
          show: false,
        },
        detail: {
          show: false,
        },
        data: [
          {
            value,
          },
        ],
      },
    ],
  }

  gaugeChart.setOption(option)

  window.addEventListener('resize', () => {
    gaugeChart.resize()
  })
}

export { drewGauge }
